<template>
  <v-dialog v-model="visable" width="360">
    <template v-slot:activator="{ on, attrs }">
      <slot name="activator" :on="on" :attrs="attrs"
        ><v-btn v-bind="attrs" v-on="on" icon color="purple" x-large :elevation="6">
          <j-icon>projector-screen</j-icon></v-btn
        ></slot
      >
    </template>
    <v-card>
      <v-card-title>打开投影</v-card-title>
      <v-card-text>
        <v-alert :value="successCopyDialogVisable" type="success"><span>复制成功</span></v-alert>
        <v-text-field ref="urlInput1" type="text" :value="fangYingUrl" @click:append="copyUrl"></v-text-field>
      </v-card-text>
      <v-card-actions class="card-actions">
        <v-btn @click="visable = false">关闭</v-btn>
        <v-btn @click="isService" color="primary">打开投影</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  name: "JcProSetting",
  props: {
    fangYingUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visable: false,
      copyTooltipShow: true,
      successCopyDialogVisable: false,
    };
  },
  methods: {
    // 复制链接
    async copyUrl() {
      console.log(navigator.clipboard);
      try {
        await navigator.clipboard.writeText(this.fangYingUrl);
        this.successCopyDialogVisable = true;
        setTimeout(() => {
          this.successCopyDialogVisable = false;
        }, 2000);
      } catch (e) {
        alert("复制失败，请使用 Ctrl+C");
      }
    },
    // 打开新窗口
    isService() {
      window.open(this.fangYingUrl, "_blank");
    },
  },
};
</script>
<style scoped>
.card-actions {
  display: flex;
  justify-content: flex-end;
}
</style>
